<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import type { FormRules } from "element-plus";
import { message } from "@/utils/message";
import { Plus, Delete } from "@element-plus/icons-vue";
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  treeInfo: {
    type: Object,
    default: () => {}
  },
  tableInfo: {
    type: Object,
    default: () => {}
  }
});
const ruleFormRef = ref(null);
const dialogFormVisible = ref(props.visible);
const emits = defineEmits(["update:visible", "refresh"]);
// 监听父组件传入的visible变化
watch(
  () => props.visible,
  newVal => {
    dialogFormVisible.value = newVal;
  }
);
const handleCancel = () => {
  emits("update:visible", false);
};
const handSave = async () => {
  await ruleFormRef.value.validate();
  if (props.tableInfo.id) {
    emits("refresh");
  } else {
    emits("update:visible", false);
    emits("refresh");
  }
};

interface FormModel {
  name: string;
  id: string;
  nameType: string;
  des: string;
  arr: Array<OptionItem>;
}
interface OptionItem {
  itemname: string;
  radio: string;
  isException?: string;
  xIndex: number;
}
// 选中的数据源
const form = reactive<FormModel>({
  id: "",
  nameType: props.treeInfo.label,
  name: "",
  des: "",
  arr: [
    { itemname: "", radio: "", isException: "", xIndex: 1 },
    { itemname: "", radio: "", isException: "", xIndex: 2 }
  ]
});
const validateName = (
  rule: any,
  value: string,
  callback: (error?: Error) => void
) => {
  const regex = /^[A-Za-z\d\u4e00-\u9fa5]{1,30}$/;
  if (!regex.test(value)) {
    callback(new Error("请输入数字、字母、汉字"));
  } else {
    callback();
  }
};
// 动态生成 arr 里每个 itemname 的校验规则
const generateArrRules = () => {
  const arrRules: Record<string, any[]> = {};
  form.arr.forEach((_, index) => {
    arrRules[`arr.${index}.itemname`] = [
      { required: true, message: "请输入选择项", trigger: "blur" },
      { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "change" }
    ];
  });
  return arrRules;
};
const rules: FormRules<FormModel> = {
  name: [
    { required: true, message: "请输入类型名称", trigger: "blur" },
    { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "change" }
  ],
  des: [
    { required: true, message: "请输入巡检内容", trigger: "blur" },
    { min: 1, max: 100, message: "长度在 1 到 100 个字符", trigger: "change" }
  ],
  ...generateArrRules()
};
const addItem = () => {
  form.arr.push({
    itemname: "",
    xIndex: form.arr.length + 1,
    radio: "",
    isException: ""
  });
};
const insItemsOptionsChange = (checked, val) => {
  // console.log(checked, val, i, 'checked, val, i')
  if (checked) {
    form.arr[val].isException = "0";
  } else {
    form.arr[val].isException = "1";
  }
};
const deleteBtn = index => {
  form.arr.splice(index, 1);
};
</script>

<template>
  <el-dialog
    v-model="dialogFormVisible"
    width="960"
    :title="props.tableInfo.id ? '编辑巡更项目类型' : '新增巡更项目类型'"
    draggable
    :before-close="handleCancel"
  >
    <div>{{ props.treeInfo.name }}</div>
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      label-width="auto"
      label-position="right"
      status-icon
    >
      <el-form-item label="巡更项目类型名称" prop="nameType">
        <el-input
          v-model="form.nameType"
          disabled
          placeholder="请输入类型名称"
        />
      </el-form-item>
      <el-form-item label="巡更项目" prop="name">
        <el-input v-model="form.name" placeholder="请输入类型名称" />
      </el-form-item>
      <el-form-item label="巡更内容" prop="name">
        <el-input
          v-model="form.des"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 4 }"
          placeholder="请输入类型名称"
        />
      </el-form-item>

      <el-form-item
        v-for="(item, index) in form.arr"
        :key="index"
        :label="`选项${index + 1}`"
        :prop="`arr.${index}.itemname`"
        class="input-radio"
      >
        <el-input
          v-model="item.itemname"
          style="width: 90%"
          placeholder="请输入选项内容"
        />
        <el-checkbox
          v-model="item.radio"
          @change="insItemsOptionsChange(item.radio, index)"
          >异常</el-checkbox
        >
        <el-icon v-if="index > 1" class="delete-icon" @click="deleteBtn(index)">
          <Delete />
        </el-icon>
      </el-form-item>

      <el-form-item label="" class="none-label">
        <div class="add-box" @click="addItem">
          <!--          <Plus />-->
          新增
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handSave">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.input-radio {
  :deep(.el-form-item__content) {
    display: flex;
    justify-content: space-between;
    .delete-icon {
      cursor: pointer;
      color: var(--el-color-danger);
    }
  }
}
.none-label {
  .add-box {
    cursor: pointer;
    //width: 455px;
    margin-left: 133px;
    width: 100%;
    height: 42px;
    background: #e5edfb;
    border-radius: 3px 3px 3px 3px;
    border: 1px dashed var(--el-color-primary);
    color: var(--el-color-primary);
    text-align: center;
    line-height: 42px;
    font-weight: 600;
  }
}

.add-box {
  height: 20px;
  border: 1px solid #000;
}
</style>
